const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");

module.exports = defineConfig({
  // 1. 基础路径与部署配置（解决打包后路径错误）
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/", // 生产环境部署根路径（根据服务器配置调整）
  outputDir: "dist", // 打包输出目录
  assetsDir: "static", // 静态资源（js/css/img）存放目录
  indexPath: "index.html", // 入口 HTML 路径
  transpileDependencies: true,
  configureWebpack: {
    devtool: "source-map",
    plugins: [
      new webpack.DefinePlugin({
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
      }),
    ],
  },
  devServer: {
    open: true, // 启动项目自动打开浏览器
    host: "0.0.0.0", // 允许局域网访问（手机/其他电脑可访问）
    port: 8080, // 端口号（冲突时自动切换）
    hot: true, // 开启热更新（修改代码不刷新页面）
    compress: true, // 开启 gzip 压缩（开发环境请求更快）
    client: {
      overlay: false, // 关闭浏览器错误提示
    },
    proxy: {
      "/api": {
        target: "http://36.140.160.146:5000",
        // pathRewrite: { "^/api": "" }, // 关键：重写路径，去掉 /api 前缀
        changeOrigin: true, // 解决跨域，必需
      },
    },
  },

  // 3. 性能优化（减少打包体积、提升加载速度）
  configureWebpack: (config) => {
    // 3.1 生产环境优化
    if (process.env.NODE_ENV === "production") {
      // 启用代码分割（将第三方库和业务代码分开打包）
      config.optimization = {
        splitChunks: {
          chunks: "all", // 对所有代码进行分割
          cacheGroups: {
            // 第三方库单独打包（如 vue、ant-design-vue）
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: "vendors",
              priority: -10, // 优先级（数值越大越先分割）
              reuseExistingChunk: true, // 复用已打包的chunk
            },
            // 公共组件/工具函数单独打包
            common: {
              name: "common",
              minChunks: 2, // 被引用2次以上才打包
              priority: -20,
              reuseExistingChunk: true,
            },
          },
        },
      };

      // 3.2 移除生产环境 console.log（减少代码体积）
      config.optimization.minimizer.forEach((minimizer) => {
        if (minimizer.constructor.name === "TerserPlugin") {
          minimizer.options.terserOptions.compress.drop_console = true;
        }
      });
    }

    // 3.3 路径别名（简化导入路径，如 @ 对应 src）
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": require("path").resolve(__dirname, "src"),
      "@components": require("path").resolve(__dirname, "src/components"),
      "@views": require("path").resolve(__dirname, "src/views"),
    };
  },

  // 4. 样式优化（css 分离、预处理器配置）
  css: {
    extract: process.env.NODE_ENV === "production", // 生产环境将 css 提取为单独文件（减少 js 体积）
    sourceMap: false, // 关闭 css sourceMap（生产环境不需要，减少体积）
    loaderOptions: {
      // 若使用 scss/sass，配置全局变量（无需每个文件 @import）
      scss: {
        additionalData: `@import "@/styles/variables.scss";`, // 全局 scss 变量文件路径
      },
    },
  },

  // 6. 其他优化（减少打包体积、兼容处理）
  productionSourceMap: false, // 关闭生产环境 sourceMap（减少打包体积，保护源码）
  parallel: require("os").cpus().length > 1, // 多线程构建（cpu 核心数 >1 时启用，提升构建速度）
  lintOnSave: process.env.NODE_ENV === "development", // 开发环境开启 eslint 校验，生产环境关闭（提升构建速度）
});
